<template>
  <div class="modal_header">
    <span class="modal_title">{{ title }}</span>
  </div>
  <div class="modal_container">
    <div class="tool" v-if="unref(instanceOptions).leftTool.length">
      <!-- 展示方式 -->
      <div
        class="tool_item"
        v-if="unref(instanceOptions).leftTool.includes('way')"
      >
        <div class="item_label">
          <div class="icon way"></div>
          <div>展示方式</div>
        </div>
        <CheckboxGroup v-model:value="_presentation" @change="onShowChange">
          <div
            class="item_info"
            v-for="(item, idx) in unref(instanceOptions).presentationList"
            :key="idx"
          >
            <Row>
              <Col :span="6">
                <Checkbox :value="item.value" :disabled="item.disabled"
              /></Col>
              <Col :span="16"
                ><div class="label">{{ item.label }}</div></Col
              >
            </Row>
          </div>
        </CheckboxGroup>
      </div>
      <!-- 数据类型 -->
      <div
        class="tool_item"
        v-if="unref(instanceOptions).leftTool.includes('type')"
      >
        <div class="item_label">
          <div class="icon data_type"></div>
          <div>数据类型</div>
        </div>
        <CheckboxGroup v-model:value="_dataType" @change="onChange">
          <div
            class="item_info"
            v-for="(item, idx) in unref(instanceOptions).dataTypeList"
            :key="idx"
          >
            <Row>
              <Col :span="6">
                <Checkbox :value="item.value" :disabled="item.disabled"
              /></Col>
              <Col :span="16"
                ><div class="label">{{ item.label }}</div></Col
              >
            </Row>
          </div>
        </CheckboxGroup>
      </div>
      <!-- 通道 -->
      <div
        class="tool_item"
        v-if="unref(instanceOptions).leftTool.includes('channel')"
      >
        <div class="item_label">
          <div class="icon channel"></div>
          <div>通道</div>
        </div>
        <CheckboxGroup v-model:value="_channel" @change="onChannelChange">
          <div
            class="item_info"
            v-for="(item, idx) in unref(instanceOptions).channelList"
            :key="idx"
          >
            <Row>
              <Col :span="6">
                <Checkbox :value="item.value" :disabled="item.disabled"
              /></Col>
              <Col :span="16">
                <div class="right_label">
                  <div class="label">{{ item.label }}</div>
                  <div class="line"></div>
                  <div class="icon" :style="{ background: item.color }"></div>
                </div>
              </Col>
            </Row>
          </div>
        </CheckboxGroup>
      </div>
      <!-- 设备信息 -->
      <div
        class="tool_item"
        v-if="unref(instanceOptions).leftTool.includes('deviceInfo')"
      >
        <div class="item_label">
          <div class="icon device"></div>
          <div>设备</div>
        </div>
        <CheckboxGroup v-model:value="_deviceInfo" @change="onDeviceChange">
          <div
            class="item_info"
            v-for="(item, idx) in unref(instanceOptions).deviceInfoList"
            :key="idx"
          >
            <Row>
              <Col :span="6">
                <Checkbox :value="item.value" :disabled="item.disabled"
              /></Col>
              <Col :span="16"
                ><div class="label">{{ item.label }}</div></Col
              >
            </Row>
          </div>
        </CheckboxGroup>
      </div>
    </div>
    <div class="right">
      <div class="header" @vue:mounted="(el) => getLineHeight(el)">
        <template v-if="slots.hasOwnProperty('header')">
          <slot name="header"></slot>
        </template>
        <template v-else>
          <div class="top_tool">
            <div>数据产出</div>
            <div>
              <Select
                v-model:value="_showWitch"
                :options="selectOptions"
                class="select_tool"
              ></Select>
            </div>
          </div>
        </template>
      </div>
      <div id="content" :style="contentStyle">
        <slot
          name="customRender"
          :presentation="_presentation"
          :channel="_channel"
        >
          <component
            :is="isComponent"
            v-bind="$attrs"
            :presentation="_presentation"
            :dataType="_dataType"
            :channel="_channel"
            :deviceInfo="_deviceInfo"
            :instanceOptions="instanceOptions"
          >
            <template v-for="(slot, name) in $slots" #[name] :key="name">
              <component :is="slot" />
            </template>
          </component>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import {
  computed,
  defineModel,
  defineSlots,
  ref,
  shallowRef,
  unref,
} from 'vue';
import { useUserStore } from '@boeyo/portal';
import { Checkbox, CheckboxGroup, Col, Row, Select } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';
import HistoryData from './historyData.vue';
import RealTimeData from './realTimeData.vue';
//信噪比
import SignalNoiseRatio from './signalNoiseRatio.vue';
//反应谱
import Spectrum from './spectrum.vue';
//设备触发数据
import Trigger from './trigger.vue';
//波形
import Waveform from './waveform.vue';

const props = defineProps({
  title: {
    type: String,
    default: '设备数据',
  },
  chart: {
    type: String,
    default: null,
  },
  options: {
    type: Object,
  },
});
const defaultOptions = {
  leftTool: ['way', 'type', 'channel', 'deviceInfo'],
  presentationList: [
    {
      label: '原始数据',
      value: 'value',
      disabled: false,
    },
    {
      label: '对数数据',
      value: 'log',
      disabled: false,
    },
  ],
  dataTypeList: [
    {
      label: '加速度',
      value: 'accelerationData',
      disabled: false,
    },
    {
      label: '仿真速度',
      value: 'speedData',
      disabled: false,
    },
    {
      label: '仿真位移',
      value: 'displacementData',
      disabled: false,
    },
  ],
  channelList: [
    {
      label: 'EIZ-竖桥向',
      value: 'EIZ',
      disabled: false,
      color: '#F16995',
    },
    {
      label: 'EIN-横桥向',
      value: 'EIN',
      disabled: false,
      color: '#77E3F9',
    },
    {
      label: 'EIE-纵桥向',
      value: 'EIE',
      disabled: false,
      color: '#DFC428',
    },
  ],
  deviceInfoList: [],
};
const instanceOptions = computed(() => {
  const { options } = props;
  const currentOptions = {
    ...defaultOptions,
    ...options,
  };
  const result = onUpdateOption(currentOptions);
  return result;
});

// watch(
//   () => instanceOptions.value,
//   () => {
//     console.log('watch', instanceOptions);
//   },
// );

const slots = defineSlots();
console.log(slots, 'slots');

const emit = defineEmits([
  'update:presentation',
  'update:channel',
  'update:dataType',
  'update:deviceInfo',
  'update:showWitch',
  'change',
]);

const _presentation = defineModel('presentation', {
  type: Array,
  default: ['value'],
});
const _channel = defineModel('channel', {
  type: Array,
  default: ['EIZ', 'EIN', 'EIE'],
});

const _dataType = defineModel('dataType', {
  type: Array,
  default: ['accelerationData', 'speedData', 'displacementData'],
});
const _deviceInfo = defineModel('deviceInfo', {
  type: Array,
  default: [],
});
const _showWitch = defineModel('showWitch', {
  type: String,
  default: 'signalNoiseRatio',
});
const showList = shallowRef({
  trigger: Trigger,
  signalNoiseRatio: SignalNoiseRatio,
  waveform: Waveform,
  spectrum: Spectrum,
  realTime: RealTimeData,
  history: HistoryData,
});

const isComponent = computed(() => {
  // if (props.chart) return showList.value[props.chart];
  return showList.value[_showWitch.value];
});

const userStore = useUserStore();

const selectOptions = computed(() => {
  const license = userStore.license;
  return [
    {
      label: '信噪比傅立叶谱',
      value: 'signalNoiseRatio',
      key: '3',
    },
    {
      label: '波形傅立叶谱',
      value: 'waveform',
      key: '4',
    },
    {
      label: '反应谱',
      value: 'spectrum',
      key: '5',
    },
  ].filter((item) => license.vipPaks.includes(item.key));
});

const onChange = (e) => {
  const list = unref(instanceOptions).dataTypeList.map((i) => i.value);
  _dataType.value = sortDataKeys(list, e);
};
const onChannelChange = (e) => {
  const list = unref(instanceOptions).channelList.map((i) => i.value);
  _channel.value = sortDataKeys(list, e);
};
const onDeviceChange = (e) => {
  const list = unref(instanceOptions).deviceInfoList.map((i) => i.value);
  _deviceInfo.value = sortDataKeys(list, e);
};
const sortDataKeys = (list, arr) => {
  return arr.sort((a, b) => list.indexOf(a) - list.indexOf(b));
};
const onShowChange = (e) => {
  if (e.length >= 2) return (_presentation.value = e.splice(-1));
  if (e.length <= 0) return (_presentation.value = ['value']);
  _presentation.value = e;
};

const onUpdateOption = (option) => {
  const currentOption = cloneDeep(option);
  if (_showWitch.value === 'spectrum') {
    currentOption.leftTool = ['type', 'deviceInfo'];
  } else if (_showWitch.value === 'trigger') {
    currentOption.leftTool = ['type', 'channel', 'deviceInfo'];
  } else {
    currentOption.dataTypeList = [
      {
        label: '加速度',
        value: 'accelerationData',
        disabled: true,
      },
    ];
  }
  return currentOption;
};
const headerHeight = ref(0);
const getLineHeight = (e) => {
  headerHeight.value = e.el.getBoundingClientRect().height || 0;
};
const contentStyle = computed(() => {
  return {
    background: '#103b62',
    height: `calc(100% - ${headerHeight.value}px)`,
    overflow: 'hidden auto',
    // marginTop: '15px',
  };
});
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  width: 100%;
  height: 45px;
  z-index: 1;
  background-image: url('/static/health/chart-title.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  span {
    letter-spacing: 5px;
    font-size: 24px;
    line-height: 40px;
    font-family:
      Alimama ShuHeiTi,
      Alimama ShuHeiTi;
    font-weight: bold;
    background: linear-gradient(180deg, #ffffff 26%, #93d5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.modal_container {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  display: flex;
  .tool {
    width: 14vw;
    padding-right: 2vw;
    height: 100%;
    overflow-y: auto;
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    .header {
      height: fit-content;
      background: #103b62;
    }
    .top_tool {
      margin-bottom: 15px;
      display: flex;
      & > div {
        padding: 10px 0;
        background-color: transparent;
        &:first-child {
          flex: 1;
          margin-right: 2vw;
          text-align: center;
        }
        &:last-child {
          flex: 10;
          position: relative;

          .select_tool {
            position: absolute;
            width: 200px;
            top: 50%;
            left: 2vw;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
}

.tool_item {
  margin-bottom: 3vh;
  .item_label {
    background-color: #235691;
    text-align: center;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      width: 15px;
      height: 15px;
      margin-right: 10px;
      &.data_type {
        background: url('/static/data_type.png') no-repeat;
        background-size: cover;
      }
      &.channel {
        background: url('/static/channel.png') no-repeat;
        background-size: cover;
      }
      &.device {
        background: url('/static/device.png') no-repeat;
        background-size: cover;
      }
      &.way {
        background: url('/static/way.png') no-repeat;
        background-size: cover;
      }
    }
  }
  .item_info {
    padding: 10px;
    // border-bottom: 1px solid silver;
    .right_label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .line {
        flex: 1;
        border-bottom: 1px dashed #ccc;
        margin: 0 5px;
      }
    }
    .label {
      line-height: 22px;
    }
    .icon {
      width: 10px;
      height: 10px;
    }
  }
  :deep(.ant-checkbox-group) {
    display: block;
  }
}
</style>
